<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper">
          <el-table
            :data="list"
            style="width: 100%"
             
            class="card-table"
            :border="false"
            stripe
            :default-sort="{prop: 'sort'}"
          >
            <el-table-column
            show-overflow-tooltip
              type="index"
              label="序号"
              min-width="50%"
              align="center"
            />

            <el-table-column
            show-overflow-tooltip
              label="名称"
              prop="title"
              min-width="150"
              align="center"
            />
            <el-table-column
            show-overflow-tooltip
              prop="viewCount"
              label="浏览量"
              min-width="100"
              align="center"
            />
            <el-table-column
            show-overflow-tooltip
              prop="viewUserCount"
              label="浏览人数"
              align="center"
            />
            <el-table-column
            show-overflow-tooltip
              label="状态"
              prop="status"
              :formatter="publishStatusFormat"
              align="center"
            />
            <el-table-column
            show-overflow-tooltip
              prop="publishDate"
              :formatter="myTimeDian"
              label="发布日期"
              align="center"
            />
            <el-table-column
            show-overflow-tooltip
               
              label="操作"
              align="center"
              width="200"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
                <el-button type="text"  v-if="scope.row.sort != null && childname != 'third'" size="small" @click="bottom(scope.row)">取消置顶</el-button>
                <el-button type="text"  v-if="scope.row.sort ==null && childname != 'third'" size="small" @click="top(scope.row)">置顶</el-button>
                <el-button type="text"  v-if="childname != 'third'" size="small" @click="del(scope.row)">删除</el-button>

              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :v-show="total > 0"
            background
            :current-page="currentPage"
            :page-sizes="[10, 20, 50,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>
                <!---->
              <myModal :obj="deleteobj" @close="close" @save="deleteHouse">
                <div class="mpdalBody">
                  <span>确定要删除资讯吗？</span>
                </div>
              </myModal>
              <!---->
  </div>



</template>

<script>
import { page } from '@/api/news'
import { bannerPage } from '@/api/banner'
import { aboutPage ,myTop,myBottom,bannerBottom,bannerTop,zxDel,bannerDel} from '@/api/about'
import { dateFormatRow, publishStatusFormat,myTimeDian } from '@/utils/common'
import myModal from "@/components/Modal";
export default {
  components: { myModal},
  props: {
    childname: {
      type: String
    }
  },
  data() {
    return {
      deleteobj: {
        show: false,
        title: '删除资讯',
        width: '450px'
      },
      myTimeDian,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      list: [],
      sizeForm: {},
      radio: 3,
      dateFormatRow,
      publishStatusFormat
    }
  },
  mounted(){
          this.childname = sessionStorage.getItem("childname") || "first"
  },
  watch: {
    currentPage: {
      handler(newVal) {
         if(this.childname == "first"){
            newVal && this.getList()
            return
         }
         if(this.childname == "second"){
            newVal && this.getListsecond()
            return
         }
         if(this.childname == "third"){
            newVal && this.getListthird()
            return
         }
      }
    },
    pageSize: {
      handler(newVal) {
        if(this.childname == "first"){
        newVal && this.getList()
         }
         if(this.childname == "second"){
        newVal && this.getListsecond()
         }
         if(this.childname == "third"){
        newVal && this.getListthird()
         }
      }
    },
  },
  mounted() {
    this.getList()
  },

  methods: {
    deleteHouse(){
        zxDel(this.newObj.id).then(response => {
              this.$notify({
                  title: '成功',
                  message: '删除成功',
                  type: 'success',
                  duration: 2000
                })
                 this.deleteobj.show = false
                this.getList()
            })
    },
    close(val) {
        this.deleteobj.show = false
      //  this.init()
    },
        del(obj){  
           if(this.childname == "first"){
                this.newObj = obj
                this.deleteobj.show = true
           }
           if(this.childname == "second"){
                  bannerDel(obj.id).then(response => {
                    this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                      })
                      this.getListsecond()
                  })
           }
           if(this.childname == "third"){
                  // bannerDel(obj.id).then(response => {
                  //   this.$notify({
                  //       title: '成功',
                  //       message: '删除成功',
                  //       type: 'success',
                  //       duration: 2000
                  //     })
                  //     this.getList()
                  // })
           }
        },
        bottom(obj){
           if(this.childname == "first"){
                myBottom(obj.id).then(response => {
                    this.getList()
                    this.$notify({
                        title: '成功',
                        message: '取消成功',
                        type: 'success',
                        duration: 2000
                      })
                  })
                  return
           }
           if(this.childname == "second"){
                bannerBottom(obj.id).then(response => {
                    this.getListsecond()
                    this.$notify({
                        title: '成功',
                        message: '取消成功',
                        type: 'success',
                        duration: 2000
                      })
                  })
                  return
           }

        },
      compare(property){
          return function(a,b){
              var value1 = a[property];
              var value2 = b[property];
              return value1 - value2;
          }
      },
    top(obj){
      console.log(this.childname)
       if(this.childname == "first"){
            myTop(obj.id).then(response => {
                    this.getList()
                  this.$notify({
                      title: '成功',
                      message: '置顶成功',
                      type: 'success',
                      duration: 2000
                    })
              })
              return
       }
       if(this.childname == "second"){
            bannerTop(obj.id).then(response => {
                    this.getListsecond()
                  this.$notify({
                      title: '成功',
                      message: '置顶成功',
                      type: 'success',
                      duration: 2000
                    })
              })
              return
       }
    },
    getListsecond(){
        this.loading = true
         let query = { page: this.currentPage, limit: this.pageSize }
        bannerPage(query).then(response => {
          this.list = response.data.records
          this.total = response.data.total
          this.loading = false
        })
    },
    getListsecondSs(query){
        this.loading = true
        // let query = { page: this.currentPage, limit: this.pageSize }
        bannerPage(query).then(response => {
          this.list = response.data.records
          this.total = response.data.total
          this.loading = false
        })
    },
    getListthird(){
        this.loading = true
         let query = { page: this.currentPage, limit: this.pageSize }
        aboutPage(query).then(response => {
          response.data.forEach(element => {
            element.title = element.name
          });
          this.list = response.data
          this.total = response.data.total
          this.loading = false
        })
    },
    getListthirdSs(query){
        this.loading = true
        // let query = { page: this.currentPage, limit: this.pageSize }
        aboutPage(query).then(response => {
          response.data.forEach(element => {
            element.title = element.name
          });
          this.list = response.data
          this.total = response.data.total
          this.loading = false
        })
    },
    getList() {

      this.loading = true
      let query = { page: this.currentPage, limit: this.pageSize }
      let dataFirst = sessionStorage.getItem("childname") || 'first'
      if (dataFirst === 'first') {
        page(query).then(response => {
          this.list = response.data.records
          this.total = response.data.total
          this.loading = false
        })
      }
      
      else if (dataFirst === 'second') {
       this.getListsecond()
      } else if(dataFirst === 'third') {
        this.getListthird()
      }
    },
    getListSs(query) {
      this.loading = true
      //let query = { page: this.currentPage, limit: this.pageSize }
     // if (this.childname === 'first') { .sort(this.compare('sort'))
        page(query).then(response => {
          this.list = response.data.records
          this.total = response.data.total
          this.loading = false
        })
    //  }
      
      // else if (this.childname === 'second') {
      //   bannerPage(query).then(response => {
      //     this.list = response.data.records
      //     this.total = response.data.total
      //     this.loading = false
      //   })
      // } else if(this.childname === 'third') {
      //   aboutPage(query).then(response => {
      //     this.list = response.data.records
      //     this.total = response.data.total
      //     this.loading = false
      //   })
      // }
    },
    handleClick(par) {
      if (this.childname === 'first') {
        sessionStorage.setItem("item",JSON.stringify(par))
        this.$router.push({ path: 'operatereditImgVideo/?id='+ par.id })
        return
      }
      if (this.childname === 'second') {
         sessionStorage.setItem("item",JSON.stringify(par))
        this.$router.push({ path: 'editCarousel/?id='+ par.id })
        return
      }
      if (this.childname === 'third') {
         sessionStorage.setItem("item",JSON.stringify(par))
        this.$router.push({ path: 'editorRaffle/?id='+ par.id })
        return
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    save() {
      console.log('123')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf, ::v-deep .el-table td,::v-deep .el-table__body{border: 0;}
::v-deep .el-table::before ,::v-deep .el-table__fixed-right::before{display: none;}
::v-deep  th{background: #f7f7f7;font-weight: normal;color: #101010;}
.mpdalBody{overflow: hidden;text-align: center;}
</style>

